<template>
  <fieldset>
    <legend>计数器</legend>
    <button @click="DECREMENT_NUM(5)">-</button>
    &nbsp;&nbsp;
    <b>{{num}}</b>
    &nbsp;&nbsp;
    <button @click="add">+</button>
    <h1>user:{{user}}</h1>

    <button @click="GET_PRODUCT(9)">点击获取购物车数据</button>
    <ul>
        <li v-for="item in products" :key="item.id">{{item.title}}</li>
    </ul>
    <h2>msg:{{$store.getters.reverseMsg}}</h2>
    <h2>msg:{{reverseMsg}}</h2>

  </fieldset>
</template>

<script>
//如何使用vuex定义state
//1.使用store直接获取
//2.辅助函数mapstate

//调用mutation中的方法
    //1.通过commit提交
    //2.通过辅助函数mapMutation调用

//调用action的方法
    //1.通过dispatch调用
    //2.辅助函数mapActions

//使用getters
    //1.$store.getters.xxx
    //2.辅助函数mapGetters

import {mapState,mapMutations,mapActions,mapGetters} from "vuex"
export default {
    namespaced: true,
    //将状态映射到计算属性中(规律：结果放在计算属性，函数放在methods)
    computed:{
        ...mapState(["num","user","products","msg"]),
        ...mapGetters(["reverseMsg"])
    },
    data(){
        return {

        }
    },
    mounted(){
        console.log(this.$store.state.num=7777);
    },
    methods:{
        add(){
            this.$store.commit("INCREMENT_NUM",10)
        },
        ...mapMutations(["DECREMENT_NUM"]),
        getCart(){
            this.$store.dispatch("GET_PRODUCT",20)
        },
        ...mapActions(["GET_PRODUCT"])
    }
}
</script>

<style>

</style>